<template>
  <div class="hello">
    <h1>site:{{site}}</h1>
    <h2>msg: {{ msg|capitalize }}</h2>
    <h2 v-if="canSeeDetails">{{details()}}</h2>
    <h2 v-show="canSeeDetails">{{details()}}</h2>
    <pre><a v-bind:href="url">{{site}}</a></pre>
    <pre><button v-on:click="change()">Test Button</button></pre>
    <label>
      <input v-model="msg"/>
    </label>
    <button v-on:click="reverseMsg">Reverse msg</button>
    <ol>
      <template v-for="(name,index) in names">
        <li>{{index}} : {{name}}</li>
      </template>
    </ol>
    <ul>
      <template v-for="(value,key,index) in user">
        <li>{{index}} {{key}}:{{value}}</li>
      </template>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Hello',
    data() {
      return {
        msg: '测试双向绑定',
        site: '测试网站',
        url: 'https://www.baidu.com',
        canSeeDetails: false,
        names: ['Java', 'JS', 'GO'],
        user: {
          name: 'zx',
          age: 18,
          gender: 'male',
          school: 'QTU'
        }
      }
    },
    methods: {
      details: function () {
        return this.site + " TEST TEST TEST SHIT.";
      },
      change: function () {
        this.canSeeDetails = !this.canSeeDetails;
        console.log("can see : " + this.canSeeDetails)
      },
      reverseMsg: function () {
        this.msg = this.msg.split('').reverse().join('')
      }
    },
    filters: {
      capitalize: function (value) {
        if (!value) {
          return '';
        }
        value = value.toString();
        return value.charAt(0).toUpperCase() + value.slice(1);
      }
    },
    watch:{

    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
